<template>
  <div>
    <h1>我是父组件</h1>
    <!--component 动态组件
     is属性  后面的名字用来切换组件 -->

    <component :is="Feature" />
    <el-button @click="Feature = 'temOne'">切换到组件1</el-button>
    <el-button @click="Feature = 'temTwo'">切换到组件2</el-button>
    <h1 v-myshow="flag"> 你好啊</h1>
  </div>
</template>
<script>
import temOne from './temOne.vue'
import temTwo from './temTwo.vue'
import Vue from 'vue'
// Vue.directive注册全局指令的方法 myshow自定义的指令名
// 他有五个生命周期钩子函数 bind inserted updated unbind
Vue.directive('myshow', {
  bind() {}, // 指令被绑定了
  inserted(el, bindding) { // 指令所在元素被插入页面
    // el----当前绑定指令的元素 获取组件
    // bindding.value代表指令后的值
    if (bindding.value) {
      el.style.display = 'block'
    } else {
      el.style.display = 'none'
    }
  },
  updated() {

  },
  componentUpdated() { // 指令所在组件的 VNode 及其子 VNode 全部更新后调用

  },
  unbind() { // 指令与元素解绑时调用

  }
})
export default {
  components: { temOne, temTwo },
  data() {
    return {
      Feature: 'temOne',
      flag: false
    }
  },
  // 组件的路由钩子函数beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

  beforeRouteEnter(to, from, next) {
    // 组件内部的路由钩子 进入组件之前触发
    console.log(to, '**********')
    console.log(from, '---离开的组件信息-----')
    next()
  }
  // beforeRouteUpdate (to, from, next) {
  //   // 组件内部的路由钩子 路由信息变化触发
  // },
  // beforeRouteLeave (to, from, next) {
  //   // 组件内部的路由钩子  离开组件触发
  // }
}
</script>
